<template>
	<div :class="prefixCls" :style="{ width: getCalcContentWidth }">
		<div :class="`${prefixCls}__left`">
			<slot name="left"></slot>
		</div>
		<slot></slot>
		<div :class="`${prefixCls}__right`">
			<slot name="right"></slot>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useDesign } from '@/hooks/web/useDesign';

export default defineComponent({
	name: 'PageFooter',
	inheritAttrs: false,
	setup() {
		const { prefixCls } = useDesign('page-footer');
		const { getCalcContentWidth } = useMenuSetting();
		return { prefixCls, getCalcContentWidth };
	},
});
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-page-footer';

.@{prefix-cls} {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: @page-footer-z-index;
	display: flex;
	width: 100%;
	align-items: center;
	padding: 0 24px;
	line-height: 44px;
	background-color: @component-background;
	border-top: 1px solid @border-color-base;
	box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 8%), 0 -9px 28px 0 rgb(0 0 0 / 5%), 0 -12px 48px 16px rgb(0 0 0 / 3%);
	transition: width 0.2s;

	&__left {
		flex: 1 1;
	}
}
</style>
